<template>
  <el-card>
    <div>
      <div class="list-h">
        <i></i>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formSearch"
          ref="formRef"
          @submit.prevent
        >
          <el-form-item label="单据编号" prop="billNum">
            <el-input
              clearable
              class="width-custom120"
              v-model="formSearch.billNum"
            ></el-input>
          </el-form-item>
          <el-form-item label="单据名称" prop="billName">
            <el-input
              clearable
              class="width-custom120"
              v-model="formSearch.billName"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="createUser">
            <el-input
              :disabled="activeName === 'Self'"
              clearable
              class="width-custom120"
              v-model="formSearch.createUser"
            ></el-input>
          </el-form-item>
          <el-form-item label="单据类型" prop="billType">
            <el-select
              v-model="formSearch.billType"
              clearable
              class="width-custom120"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <!-- <el-button type="primary" @click="handleMainSearch">查询</el-button> -->
            <ReButton
              type="primary"
              debounce
              auto-loading
              @click="handleMainSearch"
              >查询</ReButton
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        :label="item.label"
        :name="item.name"
        v-for="(item, index) in operationList"
        :key="index"
      >
      </el-tab-pane>
      <!-- <component
        :is="operationList[activeNum].component"
        :ref="`${activeName}`"
        :formSearch="formSearch"
      ></component> -->
      <All v-if="activeName === 'All'" ref="All" :formSearch="formSearch" />
      <Todo v-if="activeName === 'Todo'" ref="Todo" :formSearch="formSearch" />
      <Done v-if="activeName === 'Done'" ref="Done" :formSearch="formSearch" />
      <Self v-if="activeName === 'Self'" ref="Self" :formSearch="formSearch" />
    </el-tabs>
  </el-card>
</template>

<script lang="ts">
import { reactive, ref, defineComponent } from "vue";
import { BillStatusEnum } from "./types";
import All from "./components/operations/All.vue";
import Todo from "./components/operations/Todo.vue";
import Done from "./components/operations/Done.vue";
import Self from "./components/operations/Self.vue";
import ReButton from "/@/components/ReButton/index.vue";

export default defineComponent({
  components: { All, Todo, Done, Self, ReButton },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let All = ref<HTMLElement | null>(null) as any;
    let Todo = ref<HTMLElement | null>(null) as any;
    let Done = ref<HTMLElement | null>(null) as any;
    let Self = ref<HTMLElement | null>(null) as any;
    let formSearch = reactive({
      billName: "",
      billNum: "",
      billType: "",
      createUser: ""
    });
    let operationList = [
      { name: "All", label: "全部", component: "" },
      { name: "Todo", label: "待办", component: "" },
      // { name: "Toread", label: "待阅", component: "" },
      { name: "Done", label: "已办", component: "" },
      // { name: "Read", label: "已阅", component: "" },
      { name: "Self", label: "我的申请", component: "" }
    ];

    // 初始状态
    let activeName = ref<string>("All");
    let activeNum = ref<number>(0);

    const typeList = BillStatusEnum;

    // 切换状态
    const handleClick = tab => {
      activeName.value = tab.paneName;
      // activeNum.value = operationMap.get(tab.paneName);
      if (activeName.value === "Self") {
        formSearch.createUser = "";
      }
    };

    const handleReset = (): void => {
      formRef.value.resetFields();
    };

    const handleMainSearch = done => {
      if (activeName.value === "All") {
        All.value.handleSearch();
      } else if (activeName.value === "Todo") {
        Todo.value.handleSearch();
      } else if (activeName.value === "Done") {
        Done.value.handleSearch();
      } else if (activeName.value === "Self") {
        Self.value.handleSearch();
      }
      setTimeout(() => {
        done();
      }, 1000);
    };

    return {
      formRef,
      All,
      Todo,
      Done,
      Self,
      formSearch,
      operationList,
      activeName,
      activeNum,
      typeList,
      handleClick,
      handleReset,
      handleMainSearch
    };
  }
});
</script>

<style lang="scss" scoped></style>
